<template>
  <div class="h-full flex flex-col overflow-auto">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" active-text-color="#33A0FF"
      text-color="#595959" :ellipsis="false" @select="handleSelect">
      <el-menu-item :index="index + ''" v-for="(item, index) in menuList" :key="index + ''">{{ item }}</el-menu-item>
    </el-menu>
    <div class="flex input-box">
      <div class="flex1"></div>
      <el-select v-model="selectValue" :empty-values="[null, undefined]" multiple placeholder="请选择" @change="fetchData"
        collapse-tags collapse-tags-tooltip :max-collapse-tags="3" @remove-tag="fetchData">
        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-date-picker type="month" placeholder="请选择日期" v-model="time" @change="fetchData" format="YYYY/MM"
        value-format="YYYY-MM" />
    </div>
    <div class="flex-1">
      <div ref="chartRef" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';
import { userApi } from '@/api/modules/user.js';

const activeIndex = ref('0');
const chartRef = ref(null)
const chart = ref(null)
const time = ref("")
const selectValue = ref([''])
const options = ref([])
const menuList = ref(['分类得分', '岗位得分']);
const props = defineProps({
  previewData: {
    type: Boolean,
    required: false,
    default: null
  },
  isResumePublic: Boolean
});
function handleSelect(item) {
  selectValue.value = []
  getSelectList(item)
  activeIndex.value = item;
  fetchData()
}
const fetchData = async () => {
  if (chart.value) {
    chart.value.clear()
  }
  try {
    const res = await userApi.getStudentPointsRecord({
      ctypes: selectValue.value ? selectValue.value : [],
      date_select: time.value,
      tab: Number(activeIndex.value) + 1
    })
    updateChart(res);
  } catch (err) {
    console.error('Failed to fetch data:', err);
  }
};
function updateChart(data) {
  if (!chartRef.value || !data) return;
  const xAxisData = data.x_axis;
  const legendData = data.y_axis.map(i => i.label || '总分')
  const seriesData = data.y_axis.map(series => ({
    name: series.label || '总分',
    type: 'line',
    smooth: true,
    symbol: 'circle',
    symbolSize: 8,
    data: series.data,
    itemStyle: {
      // color: series.ctype === 0 ? '#33A0FF' : (series.ctype === 1 ? '#4BC98C' : '#FF9900')
    },
    lineStyle: {
      // color: series.ctype === 0 ? '#33A0FF' : (series.ctype === 1 ? '#4BC98C' : '#FF9900'),
      width: 2
    },
    areaStyle: {
      // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      //   { offset: 0, color: `rgba(${series.ctype === 0 ? '51, 160, 255' : (series.ctype === 1 ? '75, 201, 140' : '255, 153, 0')}, 0.2)` },
      //   { offset: 1, color: `rgba(${series.ctype === 0 ? '51, 160, 255' : (series.ctype === 1 ? '75, 201, 140' : '255, 153, 0')}, 0)` }
      // ])
      opacity: 0.2
    }
  }));
  const option = {
    title: {
      text: '得分',
      textStyle: {
        fontSize: 14,
        fontFamily: 'Arial',
        color: '#18191A'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: '#D9D9D9',
          type: "solid"
        }
      },
      formatter: function (params) {
        let tooltipStr = '';
        params.forEach((param, index) => {
          const color = param.color;
          const name = param.seriesName;
          const value = param.value;
          if (index === 0) {
            tooltipStr += `<div style="font-size: 14px;color: rgba(0,0,0,0.88);font-family: MiSans, MiSans;">${param.name}</div>`;
          }
          tooltipStr += `<div style="display: flex; align-items: center;">`;
          tooltipStr += `<span style="color: rgba(0,0,0,0.88); margin-right: 10px;font-family: MiSans, MiSans;">${name}</span>`;
          tooltipStr += `<span style="color: ${color};font-family: MiSans, MiSans;font-weight: 500;">${value}</span>`;
          tooltipStr += `</div>`;
        });
        return tooltipStr;
      }
    },
    legend: {
      show: true,
      right: '0',
      itemWidth: 16,
      itemHeight: 3,
      icon: 'rect',
      textStyle: {
        color: '#000',
        fontSize: 14
      },
      data: legendData
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '8%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xAxisData,
      axisLine: {
        lineStyle: {
          color: '#E5E5E5'
        }
      },
      axisLabel: { color: '#999999' }
    },
    yAxis: {
      type: 'value',
      // min: 0,
      // max: 200,
      interval: 20,
      splitLine: {
        lineStyle: {
          color: '#E5E5E5',
          type: 'dashed'
        }
      },
      axisLabel: {
        color: '#999999'
      }
    },
    series: seriesData
  };
  const chartsDarta = echarts.init(chartRef.value);
  chartsDarta.setOption(option, true);
  chart.value = chartsDarta
}

// 监听窗口大小变化
const handleResize = () => {
  chart.value?.resize()
}

//获取成长记录下拉框
const getSelectList = (type) => {
  const dtype = type === '0' ? 'knowledge' : 'job'
  userApi.getDictionaryOptions({ dtype }).then(res => {
    options.value = res
    if (type === '0') {
      options.value.unshift({ dtype: '总分', id: '', name: '总分' })
      selectValue.value = ['']
    } else {
      selectValue.value = []
    }
  })
}

onMounted(() => {
  // initChart(),
  getSelectList('0')
  fetchData()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  chart.value?.dispose()
})
</script>
<style lang="scss" scoped>
.el-menu-demo :deep(.el-menu-item:hover),
.el-menu-demo :deep(.el-menu-item.is-active),
.el-menu-demo :deep(.el-menu-item:focus) {
  background-color: transparent !important;
  /* 取消背景颜色变化 */
}

.el-menu-demo :deep(.is-active) {
  background-color: transparent !important;
}

.input-box {
  margin: 20px 0;

  :deep(.el-date-editor) {
    width: 240px;
  }

  :deep(.el-select) {
    width: 240px;
    margin-right: 20px;
  }
}
</style>
